<template>
    <div class="child1">
        <h4>子组件1</h4>
        <p>子组件1的A数据: {{ num }}</p>
            
        <button @click="getParentData($parent)">获取父组件的数据</button>
        <button @click="changeParentMoney($parent)">修改父组件的数据</button>

    </div>
</template>

<script setup>
    import {ref} from 'vue';
    const num = ref(10);

    function getParentData(p) {
        console.log(p);
        
        for (let key in p) {
            console.log(key + "---" + p[key]);
        }
    }

    function changeParentMoney(p) {
        // p['money'] -= 10;
        p.money -= 10;
    }   

    defineExpose({num})
</script>
<style>
    .child1 {
        width: 300px;
        height: 100px;
        background-color: bisque;
        margin-top: 80px;
    }
</style>    